<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script>
        function selectedapi(data) {
            //alert("=>"+data.value);
            var selectedApi = data.value;
            location.href = "/Simulator/changeapi.htm?selectedAPI=" + selectedApi;

        }

    </script>
</head>


<body>
<form:form method="get" commandName="CatalogManagementCatagory" action="invokeCatalogManagement.htm">
    <H3>Catalog Management</H3>
    <!--<P>You can insert a description about this AIP in here...</P>-->


    <table id="table_style">
        <tr>
            <th><form:label path="apiCategory">Catagory</form:label></th>
            <td>
                <form:select path="apiCategory" multiple="false" size="1" itemValue="${selectedApiCatagory}" onchange="submit()">
                    <form:option value="${selectedApiCatagory}" label="${selectedApiCatagory}"/>
                    <form:options items="${catalogManagementCategoryMap}" />
                </form:select>
            </td>
        </tr>
    </table>


    <!-- Option Box 01 -->
    <!-- Option Box 01 -->
    <div class="optionBox_style_01">

        <div>

         <c:forEach items="${catalogAPIMap }" var="api">  
           <span class="radioButtonDiv_style">
             <form:radiobutton onclick="submit()" path="selectedAPI" id="${api}" label=" ${api}" value="${api}" onmouseout='this.checked = true;' />  
             
             <c:set var="count" value="${count + 1}" scope="page"/>
             <c:choose>
                    <c:when test="${count%3==0}"> <br/><br/><br/> </c:when>
             </c:choose>
           </span>  
         </c:forEach>  

        </div>
    </div>


    <!-- text area -->
    <div class="optionBox_style_01">
         <textarea id="input_param_txtarea_id" name="inputParameter" value="${selectedAPIParam}"  style="width:690px;resize:none;background-color:#FAFEFF">${selectedAPIParam} </textarea>       
    </div>

    <!-- Buttons -->
    <div style="height:50px;margin-left:545px;">
        <input type="submit" id="app_button" name="InvokeAPI" value="Submit" class="app_button">
        <input type="submit" id="app_button" name="clearHistory" value="Clear" class="app_button">
    </div>


    <%----------------------------------------------------------------------------------------------%>
        <section id="content_result">

        <div class="resultTable_header">API Call History</div>
        <table id="table-4">
            <thead>
                <tr>
                    <th>API</th>
                    <th>INPUT</th>
                    <th>RESULT</th>
                    <th></th>
                </tr>
            </thead>
            <c:forEach var="CatalogManagementView" items="${CatalogManagementViewCollection}">
                <tbody>
                    <tr>
                        <td>${CatalogManagementView.apiName}</td>
                        <td>${CatalogManagementView.inputValueString}</td>
                        <td>${CatalogManagementView.result}</td>
                        <td>
                            <a href="downloadCMResponseXML.htm?viewId=${CatalogManagementView.id}" name="download"
                               class="button">Download</a>
                        </td>
                    </tr>
                </tbody>
            </c:forEach>
        </table>
    </section>
    
    
    <%------------------------------------------------------------------------------------------------ --%>
</form:form>

</body>
</html>

